<%--
  Created by IntelliJ IDEA.
  User: macbook
  Date: 2018/3/30
  Time: 09:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css"
          href="easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="myjs/path.js"></script>
</head>
<style type="text/css">
    .datagrid-footer {
        background-color: #f7c66c;
    }
</style>
<body class="easyui-layout" style="width: 100%; height: 100%;">

<div id="tb">
    日期从: <input id="qtime" class="easyui-datebox" editable='false'
                style="width: 120px"> 到: <input id="htime"
                                                class="easyui-datebox" editable='false' style="width: 120px">
    年份：<input class="easyui-combobox" id="year" style="width: 150px" ;
              data-options="valueField:'year',textField:'year',panelHeight:'auto'">
    季节：<input class="easyui-combobox" id="season" style="width: 150px" ;
              data-options="valueField:'season',textField:'season',panelHeight:'auto'">品牌：<input
        class="easyui-combobox" id="pinpai" style="width: 150px" ;
        data-options="valueField:'pinpai',textField:'pinpai',panelHeight:'auto'">
    查看方式:<label><input id='zt1' type='radio'
                       onclick='ts()' name='chima' value='2'><span>按尺码</span></label> <label><input
        id='zt2' type='radio' onclick='ts()' name='chima' value='1'><span>按颜色</span></label>
    <label><input id='zt3' type='radio' onclick='ts()'
                  checked='checked' name='chima' value='0'>按款号</label>
    <input id="kuanhao" class="easyui-searchbox"
           data-options="searcher:qq,prompt:'请输入款号关键词'"/>
    <script type="text/javascript">
        function qq(value, name) {
            ts();
        }
    </script>
    <a iconCls="icon-save" class="easyui-linkbutton" type="button"
       onclick="saveToTailorExcel()">导出Excel</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-reload',plain:true" onclick="chongZhi()">重置搜索</a>
</div>
<table id="cjTable"></table>
</body>
</html>
<script>
    //导出excel
    function saveToTailorExcel() {

        var starttime = $("#qtime").val()
        var fenlei = $('input:radio[name="chima"]:checked').val();
        var endtime = $("#htime").val()
        var product = $("#kuanhao").val()
        window.location.href = path + "/tailorreport/downloadtailorreport.xls?fenlei=" + fenlei + "&startTime=" + starttime + "&endTime=" + endtime
            + "&product=" + product;
    }

    var date = new Date();//Tue Jul 16 01:07:00 CST 2013的时间对象
    var year = date.getFullYear();//年
    var month = date.getMonth() + 1;//月份（月份是从0~11，所以显示时要加1）
    var day = date.getDate();//日期
    var end = year + '-' + month + '-' + day;
    var start = year + '-' + month + '-' + 1;
    $("#qtime").val(start);
    $('#htime').val(end);

    //重置数据
    function chongZhi() {
        $('#qtime').combo('setText', '');
        $('#htime').combo('setText', '');
        $('#qtime').combo('setValue', '');
        $('#htime').combo('setValue', '');
        $("#kuanhao").searchbox('setValue', "");
        $("#season").combobox('setValue', '')
        $("#year").combobox('setValue', '')
        $("#pinpai").combobox('setValue', '')
        ts()
    }

    $(function () {
        ts(); // 页面进入调用查询方法
        $.ajax({
            url: path + "/production/selectallattr.do",
            type: 'post',
            dataType: "json",
            success: function (data) {
                $('#season').combobox("loadData", data.data.seasonx);
                $('#year').combobox("loadData", data.data.yearx);
                $('#pinpai').combobox("loadData", data.data.pinpaix);
            }
        })
    })

    function ts() {
        var fenlei = $('input:radio[name="chima"]:checked').val();
        var startTime = $("#qtime").val();
        var endTime = $("#htime").val();
        var product = $("#kuanhao").val();
        var season = $("#season").combobox('getValue');
        var year = $("#year").combobox('getValue');
        var pinpai = $("#pinpai").combobox('getValue');
        //加载数据
        $('#cjTable').datagrid(
            {
                width: 'auto',
                toolbar: '#tb',
                striped: false,
                singleSelect: false,
                url: path + '/tailorreport/list.do',
                queryParams: {
                    fenlei: fenlei,
                    startTime: startTime,
                    endTime: endTime,
                    product: product,
                    season: season,
                    year: year,
                    pinpai: pinpai
                },
                loadMsg: '数据加载中请稍后……',
                iconCls: 'icon-edit',
                pagination: true,
                pageSize: 20,//分页大小
                striped: false,
                pageList: [20, 30, 40, 50],//每页的个数
                fit: true,//自动补全
                remoteSort: true,
                sortable: true,
                sortName: 'createTime',
                sortOrder: 'desc',
                showFooter: true,
                columns: [[{
                    field: 'product',
                    title: '商品款号',
                    align: 'center',
                    width: 150
                }, {
                    field: 'productName',
                    title: '商品名称',
                    align: 'center',
                    width: 150
                }, {
                    field: 'price',
                    title: '铭牌价',
                    align: 'center',
                    width: 150,
                    formatter: function (value, row, index) {
                        if (value == null) {
                            return 0.00;
                        }
                        return value.toFixed(2);
                    }
                }
                    ,
                    {
                        field: 'chengbenjia',
                        title: '成本价',
                        align: 'center',
                        width: 100,
                        formatter: function (value, row, index) {
                            if (value == null) {
                                return 0.00;
                            }
                            return value.toFixed(2);
                        }
                    },
                    {
                        field: 'color',
                        title: '颜色',
                        align: 'center',
                        width: 80
                    }
                    ,
                    {
                        field: 'size',
                        title: '尺码',
                        align: 'center',
                        width: 80
                    }
                    ,
                    {
                        field: 'caijianshuliang',
                        title: '裁剪数量',
                        align: 'center',
                        width: 100,
                        sortable: true
                    }
                    ,
                    {
                        field: 'zongcount',
                        title: '小计',
                        align: 'right',
                        width: 100
                    }
                    ,
                    {
                        field: 'baosun',
                        title: '报损数',
                        align: 'center',
                        width: 100,
                        formatter: function (value, row, index) {
                            if (value == -1) {
                                return "--"
                            }
                            return value;
                        }
                    }
                    ,
                    {
                        field: 'yiruku',
                        title: '已入库数',
                        align: 'center',
                        width: 100,
                        formatter: function (value, row, index) {
                            if (value == -1) {
                                return "--"
                            }
                            return value;
                        }
                    }
                    ,
                    {
                        field: 'dairuku',
                        title: '待入库数',
                        align: 'center',
                        width: 100,
                        formatter: function (value, row, index) {
                            if (value == -1) {
                                return "--"
                            }
                            return value;
                        }
                    },
                    {
                        field: 'pinpai',
                        title: '品牌',
                        align: 'center',
                        width: 100
                    },
                    {
                        field: 'season',
                        title: '季节',
                        align: 'center',
                        width: 60
                    },
                    {
                        field: 'year',
                        title: '年份',
                        align: 'center',
                        width: 60
                    },
                    {
                        field: 'createTime',
                        title: '裁剪时间',
                        align: 'center',
                        width: 180,
                        sortable: true,
                        formatter: function (value, row, index) {
                            return value.substring(0, value.length - 2);
                        }
                    }
                ]],
                onBeforeLoad: function (data) {
                }
                ,
                loadFilter: function (data) {
                    if (data && data.rows.length > 0) {
                        return data;
                    } else {
                        data.total = 0
                        data.rows = []
                        return data
                    }
                }
                ,
                onLoadSuccess: function (data) {

                    if ($('input:radio[name="chima"]:checked').val() == 0) {
                        $("#cjTable").datagrid("hideColumn", "size"); // 设置隐藏列
                        $("#cjTable").datagrid("hideColumn", "zongcount");
                        $("#cjTable").datagrid("hideColumn", "color"); // 设置隐藏列
                    }
                    if ($('input:radio[name="chima"]:checked').val() == 1) {
                        $("#cjTable").datagrid("hideColumn", "size"); // 设置隐藏列
                        $("#cjTable").datagrid("showColumn", "color"); // 设置隐藏列
                        $("#cjTable").datagrid("showColumn", "zongcount");

                    }
                    if ($('input:radio[name="chima"]:checked').val() == 2) {
                        $("#cjTable").datagrid("showColumn", "size"); // 设置隐藏列
                        $("#cjTable").datagrid("showColumn", "zongcount");
                        $("#cjTable").datagrid("showColumn", "color"); // 设置隐藏列
                    }
                    //给表格增加一行解决最后小计不算的问题
                    $('#cjTable').datagrid('appendRow', {
                        product: '',
                        createTime: ''
                    });

                    var color = 1;
                    var size = 1;
                    var zongji = 0;
                    var columns = $('#cjTable').datagrid("options").columns;
                    var rows = $('#cjTable').datagrid("getRows");
                    var count = 0;
                    for (var i = 1; i < data.rows.length; i++) {
                        if (zongji == 0) {
                            zongji += data.rows[i - 1]['caijianshuliang']
                        }
                        if (data.rows[i]['product'] == data.rows[i - 1]['product'] && data.rows[i]['createTime'] == data.rows[i - 1]['createTime']) {
                            count++;
                            zongji += data.rows[i]['caijianshuliang']
                        } else {
                            rows[i - 1 - count][columns[0][7].field] = zongji;
                            $('#cjTable').datagrid('refreshRow', i - 1 - count);
                            zongji = 0;
                            count = 0;
                        }
                    }

                    //删除最后一行
                    $('#cjTable').datagrid('deleteRow', data.rows.length - 1);

                    for (var i = 1; i < data.rows.length; i++) {
                        if (data.rows[i]['product'] == data.rows[i - 1]['product'] && data.rows[i]['createTime'] == data.rows[i - 1]['createTime']) {
                            color += 1;
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'product',  //需要合并的列
                                rowspan: color     //纵向合并的格数，如果想要横向合并，就使用colspan：color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'productName',  //需要合并的列
                                rowspan: color     //纵向合并的格数，如果想要横向合并，就使用colspan：color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'price',  //需要合并的列
                                rowspan: color     //纵向合并的格数，如果想要横向合并，就使用colspan：color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'chengbenjia',  //需要合并的列
                                rowspan: color     //纵向合并的格数，如果想要横向合并，就使用colspan：color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'zongcount',
                                rowspan: color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'pinpai',
                                rowspan: color
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - color,
                                field: 'createTime',
                                rowspan: color
                            });
                        } else {
                            color = 1;     //一旦前后两行的值不一样了，那么需要合并的格子数color就需要重新计算
                        }
                        if (data.rows[i]['color'] == data.rows[i - 1]['color'] && color != 1) {
                            size += 1;
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - size,
                                field: 'color',
                                rowspan: size
                            });

                        } else {
                            size = 1;     //一旦前后两行的值不一样了，那么需要合并的格子数color就需要重新计算
                        }
                    }
                    $("#kuanhao").next().find("input").eq(0).focus();
                }
                ,
                onClickRow: function (rowIndex, rowData) {
                    $(this).datagrid('unselectRow', rowIndex);
                }
                ,
                onLoadError: function () {
                    console.log('not ok')

                }
            }
        )

        ;
    }

    function formatDate(time) {
        if (time.length > 19) {
            time = time.substr(0, 19);
        }
        return time;
    }
</script>
